Ext.onReady(function() {

	Ext.QuickTips.init();

	Ext.form.Field.prototype.style =  {textTransform : 'uppercase'};

	var dsColonia = new Ext.data.Store({
				proxy : new Ext.data.HttpProxy({
							url : "/cake/syscable/TcContratos/combobox/1/MgColonia"
						}),
				reader : new Ext.data.JsonReader({
							id : 'id',
							root : 'datos',
							totalProperty : 'total',
							fields : [{
										name : 'id'
									}, {
										name : 'descripcion'
									}]
						})

			});
	dsColonia.load();
	var dsClientes = new Ext.data.Store({
				proxy : new Ext.data.HttpProxy({
							url : "/cake/syscable/TcContratos/combobox/2/MgCliente"
						}),
				reader : new Ext.data.JsonReader({
							id : 'id',
							root : 'datos',
							totalProperty : 'total',
							fields : [{
										name : 'id'
									}, {
										name : 'primer_nombre'
									}, {
										name : 'segundo_nombre'
									}, {
										name : 'primer_apellido'
									}, {
										name : 'segundo_apellido'
									}]
						})

			});

	var resultadoTpl = new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item"><b>{id}</b>--{primer_nombre} {primer_apellido}</div></tpl>');
	/*
	 * var resultTpl = new Ext.XTemplate( '<tpl for="."><div
	 * class="search-item">', '<h3><span>{lastPost:date("M j, Y")}<br />by
	 * {author}</span>{title}</h3>', '{excerpt}', '</div></tpl>' );
	 */

	var colonias = new Ext.form.ComboBox({
				store : dsColonia,
				mode : 'local',
				displayField : 'descripcion',
				valueField : 'id',
				typeAhead : true,
				loadingText : 'Buscando...',
				fieldLabel : 'Colonia',
				// pageSize:10,
				hiddenName : 'data[TcContrato][mg_colonia_id]',
				triggerAction : 'all',
				allowBlank : false,
				emptyText : 'Escoja una colonia...',
				forceSelection : true,
				selectOnFocus : true,
				width : 190,
				listEmptyText : 'No hay resultados',
				minChars : 2,
				lazyRender : true

			});
	var clientes = new Ext.form.ComboBox({
				store : dsClientes,
				mode : 'remote',
				displayField : 'id',
				valueField : 'id',
				typeAhead : true,
				tpl : resultadoTpl,
				loadingText : 'Buscando...',
				fieldLabel : 'Cliente',
				// pageSize:10,
				hiddenName : 'data[TcContrato][mg_cliente_id]',
				triggerAction : 'all',
				allowBlank : false,
				emptyText : 'Elija un cliente...',
				forceSelection : true,
				selectOnFocus : true,
				width : 190,
				listEmptyText : 'No hay resultados',
				minChars : 2,
				lazyRender : true,
				blankText : 'No puede estar vacio'

			});

	cantidad_televisores = new Ext.form.NumberField({
				name : 'data[TcContrato][cantidad_televisores]', // field
																	// name for
																	// submit
																	// purposes
				fieldLabel : 'No. TVs', // label text
				hidden : false,
				allowBlank : false,
				blankText : 'No puede estar vacio',
				minText : 'La cantidad minima de televisores es 2',
				maxText : 'La cantidad maxima de televisores es 20',
				// type: number,
				minValue : 2,
				maxValue : 20,
				value : 2
			})
	// make a new form
	var form_user = new Ext.form.FormPanel({
		frame : false,
		//title : 'Insertar Contrato',
		bodyStyle : 'padding: 5px 5px 0',		
		width : 550,
		labelWidth : 90,
		labelAlign : 'right',
		defaultType : 'textfield', 
		items : {
			xtype : 'tabpanel',
			activeTab : 0,
			defaults : {
				autoHeight : true,
				bodyStyle : 'padding:10px',
				width : 400
			},
			items : [{
				title : 'Datos Generales',
				layout : 'form',
				shadow: true,
				defaults : {
					width : 300
				},
				tabTip : 'Datos generales del contrato',
				items : [new Ext.form.TextField({
									fieldLabel : 'No. Contrato', 
									name : 'data[TcContrato][contrato]', // field
									allowBlank : false,
									blankText : 'No puede estar vacio',									
									style : {
										textTransform : 'uppercase'	
									}
								}), new Ext.form.TextField({
									fieldLabel : 'No. Recibo', // label text
									name : 'data[TcContrato][numero_contrato]', 
									allowBlank : false,
									blankText : 'No puede estar vacio'
								}), clientes, new Ext.form.TextField({
									fieldLabel : 'Descripcion',
									name : 'data[TcContrato][descripcion]',
									allowBlank : false,
									blankText : 'No puede estar vacio'
								}), cantidad_televisores,
									new Ext.form.TextArea({
									fieldLabel : 'Comentarios',
									name : 'data[TcContrato][comentario]',
									height : 100
								}), new Ext.form.DateField({
									fieldLabel : 'Fecha Instalacion',
									labelWidth : 110,
									name : 'data[TcContrato][fecha_instalacion]',
									width : 190,
									allowBlank : true,
									format : 'd-m-Y',
									todayText : 'Hoy'
								}), new Ext.form.TextField({
									name : 'data[TcContrato][tc_estado_contrato_id]', 
									hidden : true,
									value : 1
								})]
			}, {
				title : 'Direccion',
				layout : 'form',
				defaults : {
					width : 300
				},
				items : [
					 				new Ext.form.TextField({
									fieldLabel : 'Telefono',
									name : 'data[TcContrato][telefono]',
									allowBlank : false,
									blankText : 'No puede estar vacio',
									plugins: [new Ext.ux.InputTextMask('9999-9999', false)]}),
									colonias,									
									new Ext.form.TextField({
									fieldLabel : 'Casa',
									name : 'data[TcContrato][casa]',
									allowBlank : true,
									blankText : 'No puede estar vacio'}),
									new Ext.form.TextField({
									fieldLabel : 'Bloque',
									name : 'data[TcContrato][bloque]',
									allowBlank : true,
									blankText : 'No puede estar vacio'}),
									new Ext.form.TextField({
									fieldLabel : 'Calle',
									name : 'data[TcContrato][calle]',
									allowBlank : true,
									blankText : 'No puede estar vacio'}),
									new Ext.form.TextArea({
									fieldLabel : 'Descripcion Direccion',
									name : 'data[TcContrato][descripcion_direccion]',
									allowBlank : false,
									blankText : 'No puede estar vacio',
									height : 100})									 
									]
			}]
		},

		buttons : [{
			text : 'Guardar',
			type : 'submit',
			handler : function() {
				form_user.form.submit({
					url : '/cake/syscable/TcContratos/insertar_ext',
					success : function() {
						Ext.MessageBox.alert('Message',
								'Contrato Guardado Exitosamente!', function() {
									window.location.href = '/cake/syscable/TcContratos/'
								});
					},
					failure : function() {
						Ext.MessageBox.alert('Message', 'Error al Guardar!');
					}
				});
			}
		}, {
			text : 'Cancelar',
			handler : function() {
				form_user.form.reset();
				ventana.close(this);
			}
		}]
	});

	var  ventanaContrato = new Ext.Window({				
				id : 'simplestbl',
				layout : 'border',
				closable : true,
				width : 550,
				height: 400,
				plain: false,
				maximizable: true,
				resizable: true,					
				//modal: true,				
				title: 'Insertar Contrato',
				frame : true,										
				items : [{
							region : 'center',
							width : 200,
							layout : 'fit',
							frame : false,
							border : false,
							items : [form_user]
						}]			
	}); 
	ventanaContrato.show(this);
})